<template>
	<view class="nav-list">
		<view
			class="nav-item"
			v-for="(p, index) in navList"
			:key="index"
			@click="changePage(index)"
		>
			<span :class="p.isSelect ? 'active' : ''">{{ p.title }}</span>
			<!-- 下面移动的方块 -->
			<span :class="{ m: p.isSelect }"></span>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navList: [
				{
					title: '首页',
					isSelect: true
				}
				// {
				// 	title: '广场',
				// 	isSelect: false
				// }
			]
		};
	},
	methods: {
		changePage(e) {
			if (e) {
				for (let i = 0; i < this.navList.length; i++) {
					this.navList[i].isSelect = false;
				}
				this.navList[e].isSelect = true;
			} else {
				for (let i = 0; i < this.navList.length; i++) {
					this.navList[i].isSelect = false;
				}
				this.navList[e].isSelect = true;
			}
		}
	}
};
</script>

<style lang="scss">
.nav-list {
	width: 750rpx;
	height: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
	.nav-item {
		width: 75px;
		height: 30px;
		// background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
		span {
			transition: 0.1s;
			margin-left: 30rpx;
			margin-right: 30rpx;
			color: #999;
		}
		.active {
			color: #000;
			font-size: 20px;
			font-weight: 700;
		}
		.m {
			width: 20px;
			height: 5px;
			background-color: aqua;
			border-radius: 50px;
			position: absolute;
			top: 110%;
			left: 30%;
			transform: translate(-50%, -50%);
		}
	}
}
</style>